<template>
  <div class="print_fun_style">
    <div :title="tip.display" class="dSearch">
      <i class="icon el-icon-c-scale-to-original"></i>
    </div>
    <div class="print">
      <!-- 打印 -->
      <div :title="tip.printReport">
        <i v-print="print" class="icon el-icon-printer"></i>
      </div>
      <!-- 打印当前页 -->
      <div :title="tip.PrintCurrent" v-print="print"><i class="icon el-icon-monitor"></i></div>
    </div>
    <div class="page">
      <!-- 第一页 -->
      <div :title="tip.FirstPage"><i class="icon el-icon-caret-left"></i></div>
      <!-- 前一页 -->
      <div :title="tip.prePage"><i class="icon el-icon-arrow-left"></i></div>
      <!-- 目前所在页 -->
      <div style="display: flex">
        <span>Page</span>
        <span>
          <el-select
            v-model="currentPage"
            placeholder="请选择"
            style="width: 55px; margin: 0 5px"
            size="mini"
          >
            <el-option
              v-for="item in pages"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </span>
        <span>of</span>
        <el-input
          v-model="total"
          disabled
          style="width: 40px; margin: 0 5px"
          size="mini"
        ></el-input>
      </div>
      <!-- 下一页 -->
      <div :title="tip.nextPage"><i class="icon el-icon-arrow-right"></i></div>
      <!-- 最后一页 -->
      <div :title="tip.lastPage"><i class="icon el-icon-caret-right"></i></div>
    </div>
    <div class="save">
      <!-- 导出保存 -->
      <div :title="tip.exportSave" @click="onSaveFile">
        <i class="icon el-icon-tickets"></i>
      </div>
    </div>
    <!-- <textarea id="text">
第一行：这里输入的数据将保存为txt中
第二行：保存为文件
    </textarea> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      pages: [1, 2, 3],
      tip: {
        display: "Display the search window",
        printReport: "Print the report",
        PrintCurrent: "Print the current page",
        FirstPage: "First Page",
        prePage: "Previous Page",
        nextPage: "Next Page",
        lastPage: "Last Page",
        exportSave: "Export a report and save it to the disk",
        exportShow: "Export a report and show it in a new window",
      },
      print: {
        id: "printArea",
        popTitle: "打印", // 打印配置页上方标题
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: "",
      },
      // class="noprint"    ,不需打印的类名
    };
  },
  created() {},
  mounted() {},
  methods: {
    onSaveFile() {
      var inValue = document.querySelector("#text").value;
      var blob = new Blob([inValue], { type: "div/plain;charset=utf-8" });
      const fileName = "test.txt";
      if ("msSaveOorOpenBlob" in navigator) {
        //IE 浏览器
        window.navigator.msSaveOorOpenBlob(blob, fileName);
      } else {
        //不是IE浏览器
        var url = window.URL.createObjectURL(blob);
        var link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", fileName);
        link.click();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.print_fun_style {
  display: flex;
  width: 100%;
  line-height: 40px;
  background-color: #d0e4fe;
  cursor: pointer;
  > div {
    margin: 0 5px;
  }
  .print {
    display: flex;
    justify-content: space-between;
    min-width: 35px;
  }
  .page {
    display: flex;
    justify-content: space-around;
  }
}
</style>
<style media="print">
@page {
  /* size: auto;
  size: 21cm 29.7cm;
  margin: 0;
  padding: 0; */
  size: auto;
  margin: 15mm 15mm; /*上下30mm页边距，左右20mm页边距*/
}
.noprint {
  display: none;
}
body html {
  background-color: #ffffff;
  height: auto !important;
  margin: 0px;
}
</style>
